<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="js/jquery.js"></script>
<link
        rel="stylesheet"
        href="css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
        crossorigin="anonymous"
/>
<script
        src="js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"
></script>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>信息收集</title>
    <base href=""/>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        div {
            position: fixed;
            top: 1%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 800px;
            border: 1px solid #ebebeb;
            border-radius: 3px;
            padding: 24px;
            box-sizing: content-box;
        }

        form *:not(:last-child) {
            margin-bottom: 10px;
        }

        fieldset {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: none;
            padding: 0;
            padding: 10px;
        }

        fieldset label {
            flex: 1;
            white-space: nowrap;
            text-align: right;
            padding-right: 5px;
            height: 40px;
            line-height: 40px;
            color: #606266;
        }

        fieldset label::after {
            content: ":";
        }

        fieldset input {
            flex: 5;
            height: 40px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 15px;
            line-height: 40px;
            color: #606266;
        }

        fieldset input:focus {
            border-color: #409eff;
            outline: none;
        }

        button {
            width: 100px;
            height: 40px;
            color: #fff;
            cursor: pointer;
            background-color: #409eff;
            border: 1px solid #409eff;
            border-radius: 4px;
            margin: 0 auto;
            user-select: none;
        }

        button:hover {
            background-color: rgb(102, 177, 255);
        }

        button:active {
            background-color: rgb(58, 142, 230);
        }
    </style>
</head>

<script></script>
<body>
<div>
    <fieldset>
        <label for="companyName">公司名称-环境名称</label
        ><input
            required
            id="companyName"
            placeholder="XXX公司-测试环境"
            name="companyName"
            type="text"
    />
    </fieldset>
    <fieldset>
        <label for="gateWayUrl">HZERO网关地址</label
        ><input
            required
            id="gateWayUrl"
            placeholder="http://gateway.hzero.com"
            name="gateWayUrl"
            type="text"
    />
    </fieldset>
    <fieldset>
        <label for="userName">用户名</label
        ><input
            required
            id="userName"
            name="userName"
            placeholder="admin用户"
            type="text"
    />
    </fieldset>
    <fieldset>
        <label for="password">密码</label
        ><input
            required
            id="password"
            name="password"
            placeholder="admin用户密码"
            type="password"
    />
    </fieldset>
    <fieldset>
        <label for="userName">client_id</label
        ><input
            required
            id="clientId"
            name="clientId"
            placeholder="访问参数client_id,默认为client"
            value="client"
            type="text"
    />
    </fieldset>
    <fieldset>
        <label for="userName">client_secret</label
        ><input
            required
            id="clientSecret"
            name="clientSecret"
            placeholder="访问参数client_secret,默认为secret"
            value="secret"
            type="text"
    />
    </fieldset>
    <fieldset>
        <button id="btn" data-loading-text="收集中..." type="button">
            在线收集
        </button>
        <button id="download" data-loading-text="下载中..." type="button">
            离线下载
        </button>
        <button id="upload" data-loading-text="上传中..." type="button">
            离线上传
        </button>
    </fieldset>
</div>

<script>
    $(function () {
        $("#btn").click(function () {
            if (!checkData()) {
                return;
            }
            $("#btn").button("loading");
            $.ajax({
                url: window.location.origin + "/collect",
                dataType: "text",
                contentType: "application/json",
                data: JSON.stringify({
                    companyName: $("#companyName").val(),
                    gateWayUrl: $("#gateWayUrl").val(),
                    userName: $("#userName").val(),
                    password: $("#password").val(),
                    clientId: $("#clientId").val(),
                    clientSecret: $("#clientSecret").val(),
                }),
                type: "POST",
                success: function (data) {
                    $("#btn").button("reset");
                    if (data != "" && JSON.parse(data).failed) {
                        alert("收集失败,错误原因：" + JSON.parse(data).message);
                        return;
                    }
                    alert("收集成功,请勿重复收集");
                    $("#btn").attr("disabled", true);
                },
                error: function (data) {
                    $("#btn").button("reset");
                    alert("收集失败,请查看服务日志!");
                },
            });
        });

        $("#download").click(function () {
            if (!checkData()) {
                return;
            }
            $("#download").button("loading");
            const formData = new FormData();
            formData.append("companyName", $("[name='companyName']").val());
            formData.append("gateWayUrl", $("[name='gateWayUrl']").val());
            formData.append("userName", $("[name='userName']").val());
            formData.append("password", $("[name='password']").val());
            const xhr = new XMLHttpRequest();
            xhr.open("POST", "/collect/download", true);
            xhr.responseType = "blob";

            function handleError() {
                $("#download").button("reset");
                alert("下载失败,请查看服务日志!");
            }

            function handleSuccess() {
                $("#download").button("reset");
                xhr.response.text().then((responseText) => {
                    let response = {};
                    try {
                        response = JSON.parse(responseText);
                    } catch (e) {
                    }
                    if (xhr.status !== 200 || response.failed) {
                        alert("收集失败,错误原因：" + response.message);
                        return;
                    }
                    const type = xhr.getResponseHeader("Content-Type");
                    const blob = new Blob([xhr.response], {type: type});
                    const dispositionArr = xhr
                        .getResponseHeader("Content-Disposition")
                        ?.split("'");
                    const fileName =
                        dispositionArr && dispositionArr[dispositionArr.length - 1];
                    downloadFile(blob, fileName);
                });
            }

            xhr.onload = handleSuccess;
            xhr.onerror = handleError;
            xhr.send(formData);
        });

        $("#upload").click(function () {
            const input = document.createElement("input");
            input.type = "file";
            input.onchange = function () {
                const data = new FormData();
                data.append("file", input.files[0]);
                $("#upload").button("loading");
                $.ajax({
                    url: "/word2pdf/itext/convert",
                    dataType: "text",
                    type: "POST",
                    async: true,
                    data: data,
                    processData: false, // 使数据不做处理
                    contentType: false, // 不要设置Content-Type请求头
                    success: function (data) {
                        $("#upload").button("reset");
                        if (data != "" && JSON.parse(data).failed) {
                            alert("失败,错误原因：" + JSON.parse(data).message);
                            return;
                        }
                        $("#upload").attr("disabled", true);
                    },
                    error: function (data) {
                        $("#upload").button("reset");
                        alert("上传失败,请查看服务日志!");
                    },
                });
            };
            input.click();
        });
    });

    function checkData() {
        if ($("#companyName").val() == "") {
            alert("请填写公司信息");
            $("#companyName").focus();
            return false;
        }
        if ($("#gateWayUrl").val() == "") {
            alert("请填写Hzero网关地址");
            $("#gateWayUrl").focus();
            return false;
        }
        if ($("#username").val() == "") {
            alert("请填写用户名");
            $("#username").focus();
            return false;
        }
        if ($("#password").val() == "") {
            alert("请填写密码");
            $("#password").focus();
            return false;
        }
        return true;
    }

    function downloadFile(blob, filename = "离线文件.txt") {
        const a = document.createElement("a");
        a.download = filename;
        a.href = URL.createObjectURL(blob);
        a.click();
    }
</script>
</body>
</html>
